<template>
  <div class="formula-editor">
    <el-card>
      <template #header>
        <div class="editor-header">
          <el-input
            v-model="formulaStore.currentFormula.title"
            placeholder="输入公式标题"
            style="width: 300px"
          />
          <div class="header-actions">
            <el-button type="primary" @click="formulaStore.saveFormula">
              <el-icon><Check /></el-icon>
              保存
            </el-button>
            <el-button @click="formulaStore.createNewFormula">
              <el-icon><Plus /></el-icon>
              新建
            </el-button>
          </div>
        </div>
      </template>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-card shadow="never">
            <template #header>
              <span>LaTeX 代码编辑</span>
            </template>
            <el-input
              v-model="formulaStore.currentFormula.latex"
              type="textarea"
              :rows="10"
              placeholder="输入 LaTeX 公式代码，例如: \frac{a}{b} = c^2"
              resize="none"
            />

            <div class="quick-symbols">
              <h4>常用符号</h4>
              <el-space wrap>
                <el-button
                  v-for="symbol in commonSymbols"
                  :key="symbol.latex"
                  size="small"
                  @click="insertSymbol(symbol.latex)"
                >
                  {{ symbol.name }}
                </el-button>
              </el-space>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <FormulaPreview :latex-content="formulaStore.currentFormula.latex" />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
// 在渲染进程中
import {watch} from "vue";
import { Check, Plus } from '@element-plus/icons-vue';
import { useFormulaStore } from '../stores/formula';
import FormulaPreview from './FormulaPreview.vue';

const setWindowTitle = (newTitle: string) => {
  if (window.electronAPI) {
    window.electronAPI.setTitle(newTitle)
  } else {
    // 开发环境下直接修改 document.title
    document.title = newTitle
  }
}

const formulaStore = useFormulaStore();

// 监听当前公式变化，动态更新标题
watch(() => formulaStore.currentFormula.title, (newTitle) => {
  if (newTitle) {
    setWindowTitle(`${newTitle} - 数学公式编辑器`)
  } else {
    setWindowTitle('数学公式编辑器')
  }
})

interface Symbol {
  name: string;
  latex: string;
}

const commonSymbols: Symbol[] = [
  { name: '分数', latex: '\\frac{}{}' },
  { name: '平方根', latex: '\\sqrt{}' },
  { name: '上标', latex: '^{}' },
  { name: '下标', latex: '_{}' },
  { name: '积分', latex: '\\int' },
  { name: '求和', latex: '\\sum' },
  { name: '乘积', latex: '\\prod' },
  { name: '极限', latex: '\\lim_{}' },
  { name: 'α', latex: '\\alpha' },
  { name: 'β', latex: '\\beta' },
  { name: 'π', latex: '\\pi' },
  { name: '∞', latex: '\\infty' }
];

const insertSymbol = (latex: string) => {
  const textarea = document.querySelector('textarea');
  if (!textarea) return;

  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const currentValue = formulaStore.currentFormula.latex;

  const newValue = currentValue.substring(0, start) +
                  latex +
                  currentValue.substring(end);

  formulaStore.currentFormula.latex = newValue;

  setTimeout(() => {
    textarea.focus();
    textarea.setSelectionRange(start + latex.length, start + latex.length);
  }, 0);
};

formulaStore.createNewFormula();
</script>

<style scoped>
.editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.quick-symbols {
  margin-top: 20px;
}

.quick-symbols h4 {
  margin-bottom: 10px;
  color: #606266;
}
</style>
